{% load static %}
{% csrf_token %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
    <title>精诚智订餐</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="{% static 'ddine/index.css' %}">
</head>
<body>
  <div id="app">

      <div style="margin: 20px 0px 0px 30%">
          <el-row type="flex" class="row-bg">
              <el-col :span="14"><div class="grid-content bg-purple">
                  <div class="block">
                    <el-date-picker
                      v-model="value"
                      type="daterange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                      :default-time="['00:00:00', '23:59:59']"
                      @change="search">
                    </el-date-picker>

                    <el-input v-model="username" placeholder="请输入用户名" style="width: 20%;" @change="search"></el-input>
                  </div>
              </div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple-light">
                  <el-button @click="search">搜索</el-button>
<!--                  <el-button  @click="exprotDownload">导出</el-button>-->
                  <el-button @click="centerDialogVisible = true">导出</el-button>
              </div></el-col>
          </el-row>

          <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                v-for="item, index in tableTiele"
                :prop="item.key"
                :label="item.title"
                width="180">
              </el-table-column>
          </el-table>


          <el-dialog
              title="数据导出"
              :visible.sync="centerDialogVisible"
              width="30%"
              center>
              <el-button @click="exprotDownload">按人自动合并订餐数量导出</el-button>
              <el-button @click="exprotNoDownload">不合并按明细导出</el-button>
          </el-dialog>
      </div>

  </div>
</body>
  <!-- import Vue before Element -->
  <script src="{% static 'ddine/vue.js' %}"></script>
  <script src="{% static 'ddine/axios.min.js' %}"></script>
  <!-- import JavaScript -->
  <script src="{% static 'ddine/index.js' %}"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
            value: '',
            username: '',
            tableTiele: [{title: '日期', key: 'ddine_time'}, {title: '姓名', key: 'name'}, {title: '手机号', key: 'mobile'}, {title: '订餐数量', key: 'num'}, {title: '订餐金额', key: 'amount'}],
            tableData: [],
            tableTotal: {},
            exportUrl: {},
            centerDialogVisible: false
        };
      },
      methods:{
        search() {
          console.log(this.value1, this.value2);
          // 使用axios进行网络请求
          axios.get('/get_ddine_detail/?date_range=' + this.value + '&username=' + this.username)
            .then(response => {
              this.tableData = response.data.data;
              this.tableTotal = response.data.total;
              this.tableTiele = [{title: '日期', key: 'ddine_time'}, {title: '姓名', key: 'name'}, {title: '手机号', key: 'mobile'}, {title: `订餐数量(合计: ${this.tableTotal.num})`, key: 'num'}, {title: `订餐金额(合计: ${this.tableTotal.amount})`, key: 'amount'}]
            })
        },
        exprotDownload() {
          axios.get('/export_ddine_detail/?date_range=' + this.value + '&username=' + this.username)
            .then(res => {
              this.exportUrl = res.data.data;

               axios({
                    url: res.data.down,
                    method: 'GET',
                    responseType: 'blob', // 响应类型为blob
               })
                .then(response => {
                  const url = window.URL.createObjectURL(new Blob([response.data]));
                  const link = document.createElement('a');
                  link.href = url;
                  link.setAttribute('download', res.data.file_name); // 文件名
                  document.body.appendChild(link);
                  link.click();
                });
            })
        },
        exprotNoDownload() {
          axios.get('/export_ddine_no_detail/?date_range=' + this.value + '&username=' + this.username)
            .then(res => {
              this.exportUrl = res.data.data;

               axios({
                    url: res.data.down,
                    method: 'GET',
                    responseType: 'blob', // 响应类型为blob
               })
                .then(response => {
                  const url = window.URL.createObjectURL(new Blob([response.data]));
                  const link = document.createElement('a');
                  link.href = url;
                  link.setAttribute('download', res.data.file_name); // 文件名
                  document.body.appendChild(link);
                  link.click();
                });
            })
        }
      }
    })
  </script>

  <style>
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
<!--        background: #99a9bf;-->
      }
      .bg-purple {
<!--        background: #d3dce6;-->
      }
      .bg-purple-light {
<!--        background: #e5e9f2;-->
      }
      .grid-content {
        border-radius: 4px;
        min-height: 36px;
      }
      .row-bg {
        padding: 10px 0;
<!--        background-color: #f9fafc;-->
      }
  </style>
</html>